<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui.js"></script>
    <link rel="stylesheet" href="/css/fonts/element-ui.css">

    <style type="text/css">
        .el-row {
            margin: 20px;
        }
        .box-card {
            margin-bottom: 10px;
        }
    </style>

</head>
<body>
<div id="root">
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">java-utils.com</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" style="float: right">
            <template>
                <el-button type="text" @click="login">登录</el-button>
            </template>
        </el-menu-item>
    </el-menu>

    <el-row :gutter="20">
        <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
            <el-input
                    placeholder="请输入内容"
                    suffix-icon="el-icon-search">
            </el-input>
        </div></el-col>
    </el-row>

    <el-row :gutter="20">
        <el-col :span="12" :offset="6"><div class="grid-content bg-purple">
            <template>
                <el-tabs>
                    <el-tab-pane label="工具类" name="first"></el-tab-pane>
                    <el-tab-pane label="文章" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="下载" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">
                        <el-card class="box-card" shadow="hover" v-for="user in users">
                            <el-link type="primary" href="http://www.baidu.com">大数据、云计算、人工智能等新兴方向再一次推大数据、云计算、人工智能等新兴方向再一次推大数据、云计算、人工智能等新兴方向再一次推</el-link>
                            <p><small>{{user.username}} 大数据、云计算、人工智能等新兴方向再一次推动了java工程师的职业发展。java开发工程师涉及到多个领域，主要负责电商、医疗、金融、ERP、物流管理、App服务端等系统功能的开发和优化工作。</small></p>
                            <small>
                                <i class="el-icon-user-solid">88</i>
                                <i class="el-icon-star-on">741</i>
                                <i class="el-icon-time">2020-04-26 22:22</i>
                            </small>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div></el-col>
    </el-row>

</div>
</body>

<script>
    var vue = new Vue({
        el: '#root',
        data: {
            users: []
        },
        methods: {
            login: function() {
                this.$prompt('用户名', '登录', {
                    confirmButtonText: '登录',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.$message({
                    type: 'success',
                    message: '你的邮箱是: ' + value
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
            }
        },
        mounted() {
            axios
                .get('http://localhost:8080/search/users', {
                    params: {
                        word: ""
                    }
                })
                .then(function (response) {
                    vue.users = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    });
</script>

</html>